<template>
	<view class="userEditing">
		<view class="topBack"></view>
		<view class="buttomDiv">
			<view class="imgDiv" @tap="chooseImage">
				<image class="imgClass" :src="userAvatar ? userAvatar : userInfo.head"></image>
				<!-- <image class="iconClass" src="httpss://chongwu.aitaoba.net/storage/uploads/20231125/0f59185b6c45c40008fd8e4fd4899946.png"></image> -->
			</view>
			<u-form :model="userInfo" ref="uForm">
				<view class="addPetTopTitleDiv">
					<view class="addPetTopTitleLeft"></view>
					<text class="addPetTopTitleText">个人信息</text>
				</view>
				<view class="formBottom">
					<u-form-item label="用户昵称" label-width="200rpx">
						<u-input v-model="userInfo.nickname" placeholder="请填写用户昵称" />
					</u-form-item>
					<u-form-item label="手机号码" label-width="200rpx">
						<u-input v-model="userInfo.phone" placeholder="请填写手机号码" />
					</u-form-item>



				</view>
				<view class="bottomDivBottom">
					<button class="cancellationButton" @tap="cancellationFun">取消</button>
					<button class="submitButton" @tap="submitFun">保存</button>
				</view>

			</u-form>
		</view>


	</view>
</template>

<script>
	import configJson from '@/config/config.js'
	import {
		editInfo
	} from '@/api/my.js'
	export default {
		data() {
			return {
				userInfo: {
					head: '../../static/tabbar/pet.png',
					nickname: '',
					phone: '',
					userAvatar: ''
				},
			}
		},
		/**
		 * 跳转到个人中心
		 */
		onBackPress(e) {

		},
		onPullDownRefresh() {

		},
		onShow() {

		},

		onLoad(options) {
			console.log(options, '看看过来的options')
			let jsonData = JSON.parse(decodeURIComponent(options.userData))

			console.log(jsonData, '看看过来的json')
			this.$set(this, 'userInfo', jsonData)
			//    this.$set(this.userInfo,'phone',jsonData.phone)
			// this.$set(this.userInfo,'nickname',jsonData.nickname)
			// 	  this.$set(this.userInfo,'nickname',jsonData.nickname)
		},

		watch: {

		},

		methods: {
			// 在页面中定义上传图片的方法
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					success: (res) => {

						const tempFilePaths = res.tempFilePaths

						this.uploadImage(tempFilePaths[0])
					}
				})
			},
			uploadImage(filePath) {
				let that = this;
				uni.uploadFile({
					url: configJson.base_url + '/api/ajax/uploads', // 上传图片的接口地址
					filePath: filePath,
					name: 'file',
					success: (res) => {
						res = JSON.parse(res.data)
						if (res.code == 200) {
							that.userInfo.head = res.data.url
							that.userAvatar = res.data.url
						}

						console.log(res, '看看上传的图片')
						// 图片上传成功后的处理逻辑
					}
				})
			},
			cancellationFun() {
				uni.navigateBack(-1);
			},
			submitFun() {
				let data = this.userInfo;
				editInfo(data).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: '修改成功',

						})
						uni.$emit('setUserInfo', this.userInfo)
						uni.navigateBack(-1);
					}
				}).catch((res) => {})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.userEditing {
		width: 100%;

	}

	.topBack {
		width: 750rpx;
		height: 253rpx;
		background: linear-gradient(180deg, #FAE24E 0%, rgba(250, 226, 78, 0) 100%);
		border-radius: 0rpx;

	}

	.buttomDiv {
		width: 750rpx;
		height: 85vh;
		background: linear-gradient(180deg, #FFF5B9 0%, #FFFEF7 17%, #FFFEF7 100%);
		border-radius: 50rpx 50rpx 0rpx 0rpx;

		border: 4rpx solid #FFFFFF;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 2;
		padding-top: 103rpx;
		box-sizing: border-box;

	}

	.imgDiv {
		width: 190rpx;
		height: 190rpx;
		// background: red;
		position: absolute;
		left: 280rpx;
		top: -95rpx;
		z-index: 3;



	}

	.imgClass {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		// background: red;
	}

	.iconClass {
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		position: absolute;
		bottom: 11rpx;
		right: 0;
		z-index: 4;
	}

	.addPetTopTitleDiv {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0rpx 0 0 31rpx;
		box-sizing: border-box;
	}

	.addPetTopTitleLeft {
		width: 8rpx;
		height: 30rpx;
		background: #FAE24E;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		opacity: 1;
		border: 1rpx solid #683518;
	}

	.addPetTopTitleText {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #2E2908;
		margin-left: 9rpx;
	}

	.formBottom {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 48rpx 60rpx 0 60rpx;
		box-sizing: border-box;
	}

	.bottomDivBottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: absolute;
		bottom: 0;
		z-index: 3;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cancellationButton {
		width: 200rpx;
		height: 80rpx;
		background: #E9E9E9;
		border-radius: 10rpx;
		outline: none;
		border: 2rpx solid #E9E9E9;
		box-sizing: border-box;
		line-height: 80rpx;
	}

	.submitButton {
		width: 480rpx;
		height: 80rpx;
		background: #FED24C;
		border-radius: 10rpx;
		outline: none;
		border: 2rpx solid #683518;
		box-sizing: border-box;
		line-height: 80rpx;
	}
</style>